<template>
  <el-container class="app-container">
    <el-header class="app-container-header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">LIST</el-menu-item>
        <el-menu-item index="2">CREATE</el-menu-item>
        <el-menu-item index="3">SETTING</el-menu-item>
        <el-menu-item index="4">DETAILS</el-menu-item>
      </el-menu>
    </el-header>
    <el-main class="app-container-main">
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
import {paths} from './columns';

export default {
  name: "App",
  data() {
    return {
      activeIndex: "1",
      paths,
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push(this.paths[index]);
    }
  }
};
</script>

<style scoped>
.app-container {
  height: 100vh;
}
.app-container .app-container-header {
  padding: 0;
}
</style>
